<script>

export default {
    // addEvent 来自插件的dom.js， 可以直接用addEventListener
    // 在自己写的画布组件内，监听点击事件
    mounted() {
        addEventListener(document.getElementById('tuozhuai'), 'mousedown', this.handleKeepActive)
    },
    // 不要忘记销毁
    beforeDestroy() {
        removeEventListener(document.getElementById('tuozhuai'), 'mousedown', this.handleKeepActive)
    },

    // 处理监听，在画布外需要保持选中状态
    handleKeepActive(e) {
        const target = e.target || e.srcElement
        console.log('点击处于画布内：', this.$refs.draw.contains(target))
        if (this.$refs.draw.contains(target)) {
            this.isPreventDeActive = false
        } else {
            this.isPreventDeActive = true
        }
        return false
    },
}

</script>

<template>
    <div ref="draw" id="tuozhuai">
        <vue-draggable-resizable :x="x" :y="y" :w="width" :h="height" :active="true" :preventDeactivation="true"
            :draggable="true" :resizable="true">
            <div>
                <!-- 组件1 -->
                <vue-draggable-resizable :x="1" :y="1" :w="200" :h="200" :active.sync="isActive"
                    :preventDeactivation="isPreventDeActive">
                    组件显示的内容1
                </vue-draggable-resizable>
                <!-- 组件2 -->
                <vue-draggable-resizable :x="1" :y="1" :w="200" :h="200" :active.sync="isActive"
                    :preventDeactivation="isPreventDeActive">
                    组件显示的内容2
                </vue-draggable-resizable>
            </div>
        </vue-draggable-resizable>
    </div>
</template>